<template>
 
      <div :id="id" class="box-bar"></div>
   
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  props: ["id" ,'datas' ],
 
  mounted() {
    setTimeout(() => {
      const data =this.datas

      const chart = new Chart({
        container: this.id,
        autoFit: true,
        padding: [30, 20, 60, 60],
      });

      chart.data(data);
      chart.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
        },
      });

      chart.legend({
        position: "top", // 设置图例的显示位置
        itemGap: 20, // 图例项之间的间距
      });
      chart.tooltip({
        position: "top",
        showCrosshairs: true,
        shared: true,
        showTitle: true,
      });
      chart.axis("temperature", {
        grid: null,
        label: {
          formatter: (val) => {
            return val  *100+ " %";
          },
        },
      });

      chart.line().position("month*temperature").color("city").shape("smooth");

      // chart.point().position("month*temperature").color("city").shape("circle");

      chart.render();
    }, 100);
  },
};
</script>
<style lang="less" scoped>
.box-bar {
  height: 100%;
  width: 100%;
}
</style>